<template>
  <div class="chatBox">
    <div :class="[isShowChat ? 'showChatTrue' : 'showChatFalse']" >
      <div :class="['userBox', item.name === selectUser ?'active':'']" v-for="(item, index) in newContactUserList" :key="item+index" @click="goChatContent(item.name)">
        <div class="userInfo">
          <img src="" alt="头像">
          <span class="name">{{ item.name }}</span>
          <span class="newMsgTip" v-if="item.unReadNum > 0"> {{ item.unReadNum }}</span>
        </div>

        <div class="msgInfo" v-if="item.unReadNum > 0">
          <span class="time">{{item.time | renderTime}}</span>
          <span class="msg">{{item.msg}}</span>
        </div>
      </div>
    </div>

    <div :class="[ isShowChatContent ? 'showChatContentTrue' : 'showChatContentFalse' ]" v-show="isShowChatContent">
      <ChatContent  @goBack="hideChatContent" ref="chatContentCom"></ChatContent>
    </div>

  </div>
</template>

<script>

import {mapState} from 'vuex';
import moment from "moment";
import chatContent from "../../components/chatContent";

export default {
  data() {
    return {
      that: this,
      contactUserList: [],  // 联系人列表
      chatIdList: [],
      selectUser: '',  // 选择的聊天人

      isShowChat: true,
      isShowChatContent: false,

      clientWidth: document.body.clientWidth

    }
  },
  computed: {
    ...mapState({
      unReadMsgList: state => state.chat.unReadMsgList
    }),

    newContactUserList(){
      let newArr = [];
      let that = this;
      this.contactUserList.forEach(item => {

        let index = this.unReadMsgList.findIndex(item2 => item2.name === item);
        if (index !== -1) {
          newArr.unshift({   // 有未读消息
            name: item,
            unReadNum: that.unReadMsgList[index].num,
            time: that.unReadMsgList[index].time,
            msg: that.unReadMsgList[index].msg
          })
        } else {
          newArr.push({ // 没有未读消息
            name: item,
            unReadNum: 0,
            time: new Date(),
            msg: ''
          })
        }
      })
      return newArr;
    }
  },

  components: {
    ChatContent: chatContent
  },

  filters: {
    renderTime: function (time) {
      if (typeof time === 'string') {
        time = parseInt(time)
      }
      return moment(time).format('MM-DD HH:mm');
    }
  },

  mounted() {
    // 获取用户列表
    this.onGetContactUserList()
    let that = this;

    // 实时监测窗口变化
    window.onresize = function(){
      that.clientWidth = document.body.clientWidth

      if (that.clientWidth > 500) {
        that.isShowChat = true;
        that.isShowChatContent = true;
      } else {
        that.isShowChat = true;
        that.isShowChatContent = false;
      }
    };
  },

  methods: {
    hideChatContent(){
      this.isShowChat = true;
      this.isShowChatContent = false;
    },

    // 获取用户列表
    onGetContactUserList() {
      var that = this;

      try {
        WebIM.conn.getRoster({
          success: function (roster) {
            roster.forEach(function (item){
              that.contactUserList.push(item.name)
              that.chatIdList.push(item)
            })

            // TODO 获取用户头像
            // WebIM.conn.fetchUserInfoById(that.contactUserList).then((res) => {
            //   console.log('获取用户头像 ',res)
            // })
          }
        });
      }
      catch (e) {
        console.log("error", e);
      }
    },

    // 前往聊天页面
    goChatContent(id){

      let index = this.chatIdList.findIndex(item => item.name === id);
      let chatId = this.chatIdList[index];

      this.$store.commit('setChatIdList', chatId)
      this.selectUser = id;

      // this.$router.push('/contact/'+id)

      this.clientWidth = document.body.clientWidth
      if (this.clientWidth > 500) {
        this.isShowChat = true;
        this.isShowChatContent = true;
      } else {
        this.isShowChat = false;
        this.isShowChatContent = true;
      }

      this.$refs.chatContentCom.initHander()

    }

  }
};
</script>

<style scoped lang="less">
    .userBox{
      padding: 3vw;
      border-bottom: 1px solid #eee;
      font-size: 4vw;

      &.active{
        background-color: #226ebc;
        color: #fff
      }

      .userInfo{
        overflow: hidden;
        padding-bottom: 3vw;


        img{
          width: 12vw;
          height: 12vw;
          border: 1px solid #eee;
          border-radius: 50%;
          float: left;
          margin-right: 3vw;
        }

        .name{
          float: left;
        }

        .newMsgTip{
          width: 5vw;
          height: 5vw;
          line-height: 5vw;
          background-color: red;
          text-align: center;
          color: #fff;
          border-radius: 50%;
          float: right;
        }
      }

      .msgInfo{
        overflow: hidden;
        .time{
          float: left;
        }
        .msg{
          float: right;
        }

      }
    }

    @media (min-width: 500px){   // 屏幕大于等于500px时生效，电脑端
      .chatBox{
        display: flex;
        height: 100vh;
        width: 100vw;
        overflow: hidden;
      }

      .showChatTrue{
        display: block;
        width: 300px;
        border-right: 10px solid #fafafa;
        height: 100vh;
        overflow-y: auto;
      }

      .showChatFalse{
        display: none;
        width: 300px;
        border-right: 10px solid #fafafa;
        height: 100vh;
        overflow-y: auto;
      }

      .showChatContentTrue{
        display: block;
        flex: 1
      }
      .showChatContentFalse{
        display: none;
        flex: 1
      }


      .userBox{
        padding: 10px;
        font-size: 16px;

        .userInfo{
          padding-bottom: 10px;
          img{
            width: 50px;
            height: 50px;
            margin-right: 20px;
          }

          .newMsgTip{
            width: 20px;
            height: 20px;
            line-height: 20px;
          }
        }
      }
    }

    @media (max-width: 500px){   // 屏幕小于等于500px时生效，手机端
      .showChatContentTrue{
        display: block;
      }
      .showChatContentFalse{
        display: none;
      }

      .showChatTrue{
        display: block;
      }

      .showChatFalse{
        display: none;
      }

    }

</style>
